<template>
    <div  class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
                    <h1>hello</h1>
                    <h2>欢迎登录</h2>
                    <el-form-item prop="username"> 
                        <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input :prefix-icon="Lock" type="password" v-model="loginForm.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading"  class="login_btn" type="primary" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { User , Lock} from '@element-plus/icons-vue'
import { reactive ,ref} from 'vue';
import { useRouter ,useRoute } from 'vue-router';
import { ElNotification } from 'element-plus'
//引入获取当前的时间的函数
import {getTime} from '@/utils/time'
//引入用户相关的小仓库
import useUserStore from "@/store/modules/user";
let useStore = useUserStore()
// 获取el-form组件
let loginForms=ref()
//获取路由器
let $router =useRouter()
//路由对象
let $route =useRoute()
let loading=ref(false)
//收集账号与密码的数据
let loginForm = reactive({ username: 'admin', password: 'atguigu123' });

const login= async()=>{
    //保证全部表单箱校验通过在发起请求
    await loginForms.value.validate();

    loading.value=true
    try{
    await useStore.userLogin(loginForm);
    //判断登录的时候,路由路径中是否有query参数 ,如果有就往query参数挑战,,没有跳转首页
    let redirect :any= $route.query.redirect
    // let redirect:any:$route.query.redirect
    $router.push({path:redirect || '/'})
    ElNotification({
    title: `HI!${getTime()}好`,
    message: '登录成功',
    type: 'success',
  })
  loading.value=false
    }catch(error){
    loading.value=false
        ElNotification({
    // title: '请检查你的账号或密码',
    message: (error as Error).message,
    type: 'error',
  })
    }
}
//自定义校验规则函数
const validatorUserName = (value: any, callback: any) => {
  //rule:即为校验规则对象
  //value:即为表单元素文本内容
  //函数:如果符合条件callBack放行通过即为
  //如果不符合条件callBack方法,注入错误提示信息
  if (value.length >= 5) {
    callback();
  } else {
    callback(new Error('账号长度至少五位'));
  }
}
// 自定义密码校验规则
const validatorPassword = (value: any, callback: any) => {
  if (value.length >= 6) {
    callback();
  } else {
    callback(new Error('密码长度至少六位'));
  }
}
//定义表单效验需要配置的规则
const rules ={
    username:[
        // {required:true,message:'用户名不能为空',trigger:'blur'},
        // {required:true,min:5,max:10,message:'账号必须为六到十位'}
        {trigger:'change',validator:validatorUserName}
    ],
    password:[
        // {required:true,min:6,max:10,message:'账号必须为六到十位'}
        {trigger:'change',validator:validatorPassword}
    ]
}
</script>

<style lang="scss" scoped>
.login_container{
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;
    .login_form{
        position: relative;
        width: 80%;
        top: 30vh;
        background: url('@/assets/images/login_form.png') no-repeat;
        background-size: cover;
        padding: 40px;
        h1{
            color: white;
            font-size: 40px;
        }
        h2{
            color: white;
            font-size: 20px;
            margin: 20px 10px;
        }
        .login_btn{
            width: 100%;
            // background-color: red;
        }


    }
}
</style>